<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .my-svg {
      width: 600px;
      height: 600px;
    }
  </style>
</head>
<body>
  <!-- <img src="" alt="" width="200" class="box" style=""> -->
  <!-- svg其实就是一个html标签 直接使用即可 -->
  <!--
    svg四个属性:
    1. width 不是在设置图标的宽度 而是在设置svg标签的宽高 设置的是容器的宽高
    2. height 不是在设置图标的高度 而是在设置svg标签的宽高 设置的是容器的宽高
    3. fill 填充颜色
    4. viewBox="0 0 原图的宽 原图的高"
       光设置width height 不能控制图标的宽高 必须要配合这个属性

       124 搭配食用

       行内样式 > 选择器 > 属性

   -->
  <svg class="my-svg" width="300" height="300" style="width: 1200px; height: 1200px" viewBox="0 0 130 130" fill="pink" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>

  <svg width="200" height="200" fill="red" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>
</body>
</html>
